<template>
  <div class="law">
    <div class="content-page">
      <div class="left-menu">
        <ul>
          <li>
            <i class="el-icon-s-management  m-r-10"></i>
            <span>政策制度</span>
          </li>
          <li>
            <i class="el-icon-s-management  m-r-10"></i>
            <span>规章制度</span>
          </li>
          <li>
            <i class="el-icon-s-management m-r-10"></i>
            <span>标准规范</span>
          </li>
          <li>
            <i class="el-icon-s-management  m-r-10"></i>
            <span>其他文件</span>
          </li>
        </ul>
      </div>
      <div class="project-info-content">
        <header>
          <span>排序：<b class="active-blue m-r-10">颁布日期</b>
            <b class="m-r-10">实施日期</b> 热度</span>
          <span class="input-box">
            <el-input v-model="searchForm.value" placeholder="请输入关键词进行搜索" class="input-with-select" style="width: 420px; height: 35px">
              <template #prepend>
                <el-select v-model="searchForm.key" placeholder="Select" style="width: 120px">
                  <el-option label="全文" value="1" />
                </el-select>
              </template>
              <template #append>
                <el-button icon="Search" />
              </template> </el-input></span>
        </header>
        <main>
          <ul>
            <li v-for="(item, index) in noticeList" :key="index">
              <span class="title">{{ item.title }}
                <el-tag class="m-l-10 m-r" type="success">现行有效</el-tag>
                <el-button type="primary" plain size="small">下载</el-button>
              </span>
              <span class="time">{{ item.time }}</span>
            </li>
          </ul>
          <el-pagination class="m-r" :current-page="queryParams.currentPage" :page-size="queryParams.pageSize" :page-sizes="[5, 10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total" />
        </main>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        key: "1",
        value: "",
      },
      queryParams: {
        total: 18,
        currentPage: 1,
        pageSize: 10
      },
      noticeList: [
        { title: "中华人民共和国科学技术进步法（2021年修订）", time: "2023-4-19" },
        {
          title: "中华人民共和国医师法",
          time: "2023-4-18",
        },
        {
          title: "中华人民共和国数据安全法",
          time: "2023-3-21",
        },
        {
          title: "中华人民共和国行政处罚法（2021年修订）",
          time: "2023-3-01",
        },
        {
          title: "中华人民共和国生物安全法",
          time: "2023-2-24",
        },
        {
          title: "中华人民共和国公职人员政务处分法",
          time: "2023-2-19",
        },
        {
          title: "中华人民共和国基本医疗卫生与健康促进法",
          time: "2023-1-08",
        },
        {
          title: "中华人民共和国药品管理法（2019年修订）",
          time: "2023-1-08",
        },
      ]
    }
  }
}
</script>

<style lang="less" scoped>
  .law {
    background: url('~@/assets/img/政策法规背景图.png') no-repeat center;
    background-size: 100% 100%;
    padding: 30px 0;
  }
  .content-page {
    width: 63%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 4px;
  }
  .left-menu {
    width: 13%;
    // padding-top: 20px;
    li {
      line-height: 25px;
      height: 30px;
      margin-bottom: 10px;
      padding: 10px 20px;
      text-align: center;
      .el-icon {
        color: #1d6fdb;
        font-size: 20px;
        margin-right: 10px;
      }
    }
    li:first-child {
      color: #fff;
      font-weight: 600;
      color: #1d6fdb;
      background: rgba(29, 111, 219, 0.08);
    }
  }
  .project-info-content {
    width: 85%;
    padding-right: 20px;
    header {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dadcde;
      padding-bottom: 10px;
      color: #333;
      .active-blue {
        color: #358aff;
      }
      :deep(.input-box) {
        font-size: 16px !important;
        border: 1px solid #dbddde;
        .el-input {
          width: 100% !important;
        }
        border-radius: 4px;
        .el-input__wrapper,
        .el-input__inner {
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
        }
        .el-input-group__prepend,
        .el-input__wrapper,
        .el-input-group__append {
          background: transparent;
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
        }
      }
    }
    main {
      ul {
        li {
          position: relative;
          padding: 20px 20px 15px 30px;
          border-bottom: 1px dashed #c5c6c8;
          display: flex;
          justify-content: space-between;
          .title::before {
            position: absolute;
            left: 5px;
            top: 27px;
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #d2dce4;
            z-index: 1;
          }
          .time {
            color: #999;
          }
        }
      }
    }
  }
</style>
